<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input 
    class="new-todo" 
    placeholder="What needs to be done?" 
    autofocus
    (keyup.enter)="addTodo($event)">
  </header>
  <!-- This section should be hidden by default and shown when there are todos -->
  <ng-template [ngIf] = "todos.length">
  <section class="main">
    <input 
    id="toggle-all"
    class="toggle-all" 
    type="checkbox"
    
    (change)="toggleAll = $event.target.checked"
    [checked]="toggleAll">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <!-- 
        每一个li是一个任务，有三种状态
        1，完成状态，completed
        2，编辑状态，editing
        3，正常状态， 没有样式
       -->
      <li 
      *ngFor="let todo of filterTodos; let i = index"
      [ngClass]="{
        completed:todo.done,
        editing:currentEditing === todo
      }"
      >
        <div class="view">
          <input class="toggle" 
          type="checkbox" 
          [(ngModel)]="todo.done"
          >
          <label (dblclick)="currentEditing=todo">{{ todo.title }}</label>
          <button class="destroy" (click)="removeTodo()"></button>
        </div>
        <input 
        (blur)="saveEdit(todo, $event)"
         class="edit" 
         [value]="todo.title"
         (keyup.esc) = "handleEditKeyUp($event)"
         (keyup.enter)="saveEdit(todo, $event)"
         >
      </li>
    </ul>
  </section>
  <!-- This footer should hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{ remaningCount }}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a 
        [ngClass]="{selected:visibility === 'all' }" 
        href="#/"
        >All</a>
      </li>
      <li>
        <a
        [ngClass]="{selected:visibility === 'active' }" 
        href="#/active">Active</a>
      </li>
      <li>
        <a
        [ngClass]="{selected:visibility === 'completed' }" 
        href="#/completed">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" (click)="clearAllDone()">Clear completed</button>
  </footer>
</ng-template>
</section>

<footer class="info">